<!--
 * @Description: 
 * @Author: 王紫琪
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 16:43:16
-->
<template>
  <!-- 1.antv/g2plot  安装 npm-->
  <!-- 2.创建一个容器 -->
  <div ref="root" style="height: 95%"></div>
</template>
<script>
//引入g2plot
import { Column, Pie } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
  setup() {
    //获取dom元素
    const root = ref(null);
    let piePlot = null;
    let initChart = () => {
      piePlot = new Pie(root.value, {  //在创建的实例中所用的传的值得参数
        appendPadding: 10,
        data: [
          { type: "生活休闲", value: 27 },
          { type: "少儿", value: 25 },
          { type: "文化", value: 18 },
          { type: "教材教辅", value: 15 },
          { type: "科技", value: 10 },
          { type: "其他", value: 5 },
        ],
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        label: {
          type: "inner",
          offset: "-30%",
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: "center",
          },
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();//render渲染函数渲染图表
    };

    onMounted(initChart);//
    return {
      root,
    };
  },
};
</script>
